import { useState } from 'react';
import BoxItem from '@/components/BoxItem';
import { Button, Col, DatePicker, Flex, Form, Input, Row, Space, Table } from 'antd';
import dayjs from 'dayjs';
import CustomTable from '../components/CustomTable';

const dateRanges = [
	{ label: '今天', value: 'today' },
	{ label: '近七天', value: 'last7days' },
	{ label: '近三十天', value: 'last30days' },
	{ label: '近三个月', value: 'last3months' }
];

const columns = [
	{
		title: '商品品类',
		dataIndex: 'category',
		key: 'category'
	},
	{
		title: '销售出库量',
		dataIndex: 'salesVolume',
		key: 'salesVolume',
		render: (text: number) => <span>{text} 件</span> // 格式化显示量
	},
	{
		title: '销售出库金额',
		dataIndex: 'salesAmount',
		key: 'salesAmount',
		render: (text: number) => <span>{text.toFixed(2)} 元</span> // 格式化金额
	},
	{
		title: '销售出库毛利',
		dataIndex: 'grossProfit',
		key: 'grossProfit',
		render: (text: number) => <span>{text.toFixed(2)} 元</span> // 格式化毛利
	},
	{
		title: '销售出库毛利率',
		dataIndex: 'grossProfitMargin',
		key: 'grossProfitMargin',
		render: (text: number) => <span>{text.toFixed(2)}%</span> // 格式化毛利率
	}
];

const data = [
	{
		key: '1',
		category: '电子产品',
		salesVolume: 100,
		salesAmount: 50000,
		grossProfit: 12000,
		grossProfitMargin: (12000 / 50000) * 100
	},
	{
		key: '2',
		category: '家具',
		salesVolume: 50,
		salesAmount: 30000,
		grossProfit: 7000,
		grossProfitMargin: (7000 / 30000) * 100
	},
	{
		key: '3',
		category: '食品',
		salesVolume: 200,
		salesAmount: 10000,
		grossProfit: 2500,
		grossProfitMargin: (2500 / 10000) * 100
	},
	{
		key: '4',
		category: '服装',
		salesVolume: 150,
		salesAmount: 45000,
		grossProfit: 13500,
		grossProfitMargin: (13500 / 45000) * 100
	},
	{
		key: '5',
		category: '家电',
		salesVolume: 80,
		salesAmount: 60000,
		grossProfit: 18000,
		grossProfitMargin: (18000 / 60000) * 100
	}
];

export default function CategoryDetails() {
	const [form] = Form.useForm();
	const [keyword, setKeyword] = useState(''); // 存储关键词
	const [startDate, setStartDate] = useState(null); // 存储起始时间
	const [endDate, setEndDate] = useState(null); // 存储结束时间
	// 日期选择逻辑
	const handleDateChange = (range: string) => {
		const now = dayjs();
		let startDate = null;
		let endDate = null;

		switch (range) {
			case 'today':
				startDate = now.startOf('day');
				endDate = now.endOf('day');
				break;
			case 'last7days':
				startDate = now.subtract(7, 'days');
				endDate = now;
				break;
			case 'last30days':
				startDate = now.subtract(30, 'days');
				endDate = now;
				break;
			case 'last3months':
				startDate = now.subtract(3, 'months');
				endDate = now;
				break;
			default:
				break;
		}

		form.setFieldsValue({
			startDate,
			endDate
		});
	};

	// 重置过滤器
	const resetFilters = () => {
		form.resetFields(); // 重置表单
		setKeyword(''); // 清空关键词
		setStartDate(null); // 清空起始日期
		setEndDate(null); // 清空结束日期
	};

	// 提交表单处理
	const handleSearch = () => {
		console.log('搜索:', { keyword, startDate, endDate });
	};

	return (
		<div>
			{/* 操作按钮 */}
			<BoxItem>
				<Flex gap="small" wrap>
					<Button type="primary">新建</Button>
					<Button>导入</Button>
					<Button>导出</Button>
				</Flex>
			</BoxItem>

			{/* 搜索框 */}
			<BoxItem>
				<Form form={form} layout="inline" onFinish={handleSearch}>
					<Row gutter={16} justify="start">
						{/* 关键词输入框 */}
						<Col>
							<Form.Item label="关键词" name="keyword">
								<Input
									value={keyword}
									onChange={e => setKeyword(e.target.value)}
									placeholder="请输入关键词"
									style={{ width: 160, marginBottom: '20px' }}
								/>
							</Form.Item>
						</Col>

						{/* 起始时间选择 */}
						<Col>
							<Form.Item label="创建时间" name="startDate">
								<DatePicker
									style={{ width: 180 }}
									placeholder="起始时间"
									value={startDate}
									onChange={date => setStartDate(date)}
									allowClear
								/>
							</Form.Item>
						</Col>

						{/* 结束时间选择 */}
						<Col>
							<Form.Item label="至" name="endDate">
								<DatePicker
									style={{ width: 180 }}
									placeholder="结束时间"
									value={endDate}
									onChange={date => setEndDate(date)}
									allowClear
								/>
							</Form.Item>
						</Col>

						{/* 快捷时间选择 */}
						<Col>
							<Space>
								{dateRanges.map(({ label, value }) => (
									<Button key={value} onClick={() => handleDateChange(value)}>
										{label}
									</Button>
								))}
							</Space>
						</Col>

						{/* 搜索和重置按钮 */}
						<Col>
							<Button type="primary" htmlType="submit">
								搜索
							</Button>
							<Button type="default" onClick={resetFilters}>
								重置
							</Button>
						</Col>
					</Row>
				</Form>
			</BoxItem>

			{/* 数据表格 */}
			<BoxItem>
				<CustomTable dataSource={data} columns={columns} rowKey="key" pagination={true} />
			</BoxItem>
		</div>
	);
}
